<template>
    <div class="zoom-home">
        <div class="zoom-home-btn" @click="zoomIn">
            <svg-icon icon-class="plus" />
        </div>
        <div class="zoom-home-separator"></div>
        <div class="zoom-home-btn" @click="zoomOut">
            <svg-icon icon-class="minus" />
        </div>
        <div class="zoom-home-separator"></div>
        <div class="zoom-home-btn" @click="zoomHome">
            <svg-icon icon-class="earth-up" />
        </div>
    </div>
</template>

<script>
import { optionsMerger, propsBinder, findRealParent } from "../../utils";
import ControlMixin from "../../mixins/Control.js";
import Options from "../../mixins/Options.js";
import { Control, DomEvent } from "leaflet";

/**
 * Add any custom component as a leaflet control
 */
export default {
    name: "LControlZoomHome",
    mixins: [ControlMixin, Options],
    props: {
        delta: {
            type: Number,
            default: 1
        }
    },
    mounted() {
        const LControl = Control.extend({
            element: undefined,
            onAdd() {
                return this.element;
            },
            setElement(el) {
                this.element = el;
            },
        });
        const options = optionsMerger(this.controlOptions, this);
        this.mapObject = new LControl(options);
        propsBinder(this, this.mapObject, this.$options.props);
        this.parentContainer = findRealParent(this.$parent);
        this.mapObject.setElement(this.$el);
        // if (this.disableClickPropagation) {
        //     DomEvent.disableClickPropagation(this.$el);
        // }
        // if (this.disableScrollPropagation) {
        //     DomEvent.disableScrollPropagation(this.$el);
        // }
        this.mapObject.addTo(this.parentContainer.mapObject);
        this.$nextTick(() => {
            /**
             * Triggers when the component is ready
             * @type {object}
             * @property {object} mapObject - reference to leaflet map object
             */
            this.$emit("ready", this.mapObject);
        });
    },
    methods: {
        zoomIn() {
            this.parentContainer = findRealParent(this.$parent);
            this.parentContainer.mapObject.zoomIn();
        },
        zoomOut() {
            this.parentContainer = findRealParent(this.$parent);
            this.parentContainer.mapObject.zoomOut();
        },
        zoomHome() {
            this.parentContainer = findRealParent(this.$parent);
            this.parentContainer.mapObject.fitWorld();
        },
    },
};
</script>
<style lang="scss" scoped>
.zoom-home {
    /* 右上 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;

    // width: 20px;
    // height: 95px;

    background: rgba(255, 255, 255, 0.8);
    /* 阴影/一级*/
    box-shadow: 0px 0px 1px rgba(31, 38, 76, 0.32),
        0px 2px 5px rgba(31, 38, 76, 0.04),
        0px 2px 3px -2px rgba(31, 38, 76, 0.1);
    border-radius: 4px;
    // transform: rotate(90deg);
    &-btn {
        /* 添加 */
        width: 18px;
        height: 25px;
        margin: 1px 0;
        font-size: 18px;
        cursor: pointer;
    }
    &-separator {
        /* 矩形 */

        width: 20px;
        // height: 2px;
        border-bottom: 1px solid #b9b4bd;
        margin: 1px 0;
        // background: #b9b4bd;
        opacity: 0.3;
    }
}
</style>
